<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/5-1'}">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改密码</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="8" :offset="2" style="margin-top: 50px">
        <el-form label="left" label-width="120px" :model="formLabelAlign" :rules="rules" ref="formLabelAlign">
          <el-form-item label="原密码" prop="oldValue">
            <el-input v-model="formLabelAlign.oldValue" type="password" v-show="formLabelAlign.oldcode"><i @click="handleold" slot="prefix" class="iconfont">&#xe618;</i></el-input>
            <el-input v-model="formLabelAlign.oldValue" v-show="!formLabelAlign.oldcode"><i slot="prefix" @click="handleold" class="iconfont">&#xe63b;</i></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newValue">
            <el-input v-model="formLabelAlign.newValue" type="password" v-show="formLabelAlign.newcode"><i @click="handlenew" slot="prefix" class="iconfont">&#xe618;</i></el-input>
            <el-input v-model="formLabelAlign.newValue" v-show="!formLabelAlign.newcode"><i slot="prefix" @click="handlenew" class="iconfont">&#xe63b;</i></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="newValue1">
            <el-input v-model="formLabelAlign.newValue1" type="password" v-show="formLabelAlign.newcode1"><i slot="prefix" @click="handlenew1" class="iconfont">&#xe618;</i></el-input>
            <el-input v-model="formLabelAlign.newValue1" v-show="!formLabelAlign.newcode1"><i slot="prefix" @click="handlenew1" class="iconfont">&#xe63b;</i></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formLabelAlign')">提交</el-button>
            <el-button @click="wentback">返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {changepwd} from '@/api/changepwd/changepwd'

  export default {
    name: "ChangePassword",
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.formLabelAlign.newValue !== '') {
            this.$refs.formLabelAlign.validateField('newValue1');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formLabelAlign.newValue) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePass1 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原密码'));
        } else {
          callback();
        }
      };
      return {
        formLabelAlign: {
          oldValue: '',
          newValue: '',
          oldcode:true,
          newcode:true,
          newcode1:true,
          newValue1: ''
        },
        rules: {
          oldValue: [
            {required: true, validator: validatePass1, trigger: 'blur'},
          ],
          newValue: [
            {required: true, validator: validatePass, trigger: 'blur'}
          ],
          newValue1: [
            {required: true, validator: validatePass2, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      handleold(){
        this.formLabelAlign.oldcode=!this.formLabelAlign.oldcode;
      },
      handlenew(){
        this.formLabelAlign.newcode=!this.formLabelAlign.newcode;
      },
      handlenew1(){
        this.formLabelAlign.newcode1=!this.formLabelAlign.newcode1;
      },
      submitForm(formLabelAlign) {
        this.$refs[formLabelAlign].validate((valid) => {
          if (valid) {
            let id = JSON.parse(localStorage.userinfo).id;
            let params = {};
            params.password = this.formLabelAlign.newValue;
            params.oldpass = this.formLabelAlign.oldValue;
            let _this = this;
            changepwd(id, params).then(function (res) {
              if (res.data.code == 0) {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                _this.$refs[formLabelAlign].resetFields();
              } else {
                _this.$message({
                  message: res.data.message,
                  type: 'error'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      wentback() {
        this.$router.push({name: 'FollowManagement'})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .wrapper {
    .w100;
  }
</style>
